<template>
  <div class="statisticsContent" :class="'statisticsContent_' + status">
    <div class="bugStatistics" v-loading="loading_bug">
      <div class="title">
        <div class="name">bug统计</div>
        <div class="setFlax" @click=setStatus(1)>展开</div>
      </div>
      <div class="echartsContent" v-if="!loading_bug">
        <BugEcharts :dataList="bugList" :key="status" />
      </div>
    </div>
    <div class="projectStatistics" v-loading="loading_task">
      <div class="title">
        <div class="name">项目工时统计</div>
        <div class="setFlax" @click=setStatus(2)>展开</div>
      </div>
      <div class="projectContent" v-if="!loading_task">
        <ProjectList :dataList="tasksList" :key="status" :groupNum="status == 2 ? 16 : 8" />
      </div>
    </div>
  </div>
</template>
<script>

import BugEcharts from "./components/bugEcharts.vue"
import ProjectList from "./components/projectList.vue"
import tableApi from "@/api/table.js"

export default {
  components: { BugEcharts, ProjectList },
  data() {
    return {
      loading_bug: false,
      loading_task: false,
      bugList: [],
      tasksList: [],
      status: 0
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading_bug = true;
      this.loading_task = true;
      Promise.all([tableApi.bugsProject(), tableApi.tasksListAll()])
        .then(([bugResponse, taskResponse]) => {
          this.bugList = bugResponse.data;
          this.tasksList = taskResponse.data;
          console.log(this.tasksList)
        })
        .catch(err => {
          console.error('error:', err);
        })
        .finally(() => {
          this.loading_bug = false;
          this.loading_task = false;
        });
    },
    setStatus(status) {
      this.status = status == this.status ? 0 : status;
    }
  }
}
</script>
<style lang="scss" scoped>
.statisticsContent,
.statisticsContent_0 {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;

  .bugStatistics {
    height: calc(40% - 20px);
  }

  .projectStatistics {
    height: calc(60% - 20px);
  }

  .projectStatistics,
  .bugStatistics {
    width: calc(100% - 20px);
    background-color: #ffffff;
    margin: 10px;

    .title {
      line-height: 50px;
      padding: 0 20px;
      font-size: 18px;
      display: flex;
      justify-content: space-between;

    }

    .projectContent,
    .echartsContent {
      height: calc(100% - 50px);
    }
  }
}

.statisticsContent_1 {
  .bugStatistics {
    height: calc(100% - 20px);
  }

  .projectStatistics {
    height: 100%;
    display: none;
  }
}

.statisticsContent_2 {
  .bugStatistics {
    display: none;
  }

  .projectStatistics {
    height: calc(100% - 20px);
  }
}

.setFlax {
  display: flex;
}
</style>
